<div ng-controller="CrearTransferenciaController">
    <fieldset>
        <legend>Transferencia Bancaria</legend>

        <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
            <span ng-bind="alert.msg"></span>
        </alert>

        <form name="formCrearTransferencia" ng-submit="crearTransaccion()" novalidate>

            <div class="row">
                <div class="col-sm-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title" style="font-weight: bold;">Datos de la Transacci&oacute;n</h3>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group" ng-class="{ 'has-error' : formCrearTransferencia.numeroCuentaOrigen.$invalid && (control.submitted || formCrearTransferencia.numeroCuentaOrigen.$dirty)}">
                                        <label>N&uacute;mero Cuenta Origen</label>
                                        <label style="color: brown;">(*)</label>
                                        <div class="input-group">
                                            <input type="text" name="numeroCuentaOrigen" ng-model="view.numeroCuentaOrigen" class="form-control" placeholder="N&uacute;mero de Cuenta Origen" readonly required/>
                                              <span class="input-group-btn">
                                                <button focus-on="focusBuscarCuentaOrigen" type="button" class="btn btn-default" ng-click="openBuscarCuentaBancariaOrigen()" autofocus>
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </button>
                                              </span>
                                        </div>
                                        <div ng-show="formCrearTransferencia.numeroCuentaOrigen.$invalid && (control.submitted || formCrearTransferencia.numeroCuentaOrigen.$dirty)">
                                            <p class="help-block" ng-show="formCrearTransferencia.numeroCuentaOrigen.$error.required">
                                                Ingrese N&uacute;mero de Cuenta Origen.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group" ng-class="{ 'has-error' : formCrearTransferencia.numeroCuentaDestino.$invalid && (control.submitted || formCrearTransferencia.numeroCuentaDestino.$dirty)}">
                                        <label>N&uacute;mero Cuenta Destino</label>
                                        <label style="color: brown;">(*)</label>
                                        <div class="input-group">
                                            <input type="text" name="numeroCuentaDestino" ng-model="view.numeroCuentaDestino" class="form-control" placeholder="N&uacute;mero de Cuenta Destino" readonly required/>
                                              <span class="input-group-btn">
                                                <button focus-on="focusBuscarCuentaDestino" type="button" class="btn btn-default" ng-click="openBuscarCuentaBancariaDestino()">
                                                    <span class="glyphicon glyphicon-search"></span>
                                                </button>
                                              </span>
                                        </div>
                                        <div ng-show="formCrearTransferencia.numeroCuentaDestino.$invalid && (control.submitted || formCrearTransferencia.numeroCuentaDestino.$dirty)">
                                            <p class="help-block" ng-show="formCrearTransferencia.numeroCuentaDestino.$error.required">
                                                Ingrese N&uacute;mero de Cuenta Destino.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group" ng-class="{ 'has-error' : formCrearTransferencia.monto.$invalid && (control.submitted || formCrearTransferencia.monto.$dirty)}">
                                        <label>Monto</label>
                                        <label style="color: brown;">(*)</label>
                                        <div class="input-group">
                                            <input focus-on="focusMonto" type="text" name="monto" ng-model="view.monto" ng-minlength="1" ng-maxlength="18" ng-pattern="/^(\d+|\d+.\d{1,2})$/" class="form-control" placeholder="Monto" required/>
                                              <span class="input-group-btn">
                                                <button type="button" class="btn btn-default" ng-click="openCalculadora()" ng-disabled="!objetosCargados.cuentaBancariaOrigen">
                                                    <span class="glyphicon glyphicon-th-list"></span>
                                                </button>
                                              </span>
                                        </div>
                                        <div ng-show="formCrearTransferencia.monto.$invalid && (control.submitted || formCrearTransferencia.monto.$dirty)">
                                            <p class="help-block" ng-show="formCrearTransferencia.monto.$error.required">
                                                Ingrese monto valido.
                                            </p>
                                            <p class="help-block" ng-show="formCrearTransferencia.monto.$error.minlength">
                                                Numero invalido.
                                            </p>
                                            <p class="help-block" ng-show="formCrearTransferencia.monto.$error.maxlength">
                                                Ingrese menos caracteres.
                                            </p>
                                            <p class="help-block" ng-show="formCrearTransferencia.monto.$error.pattern">
                                                Numero invalido (Ejemplo: 99.99).
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>&nbsp;</label>
                                        <kbd style="display: block;margin-top: 3px;min-height: 22px;">
                                            <span ng-bind="view.monto | currency : objetosCargados.cuentaBancariaOrigen.moneda.simbolo"/>
                                        </kbd>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group" ng-class="{ 'has-error' : formCrearTransferencia.referencia.$invalid && (control.submitted || formCrearTransferencia.referencia.$invalid)}">
                                        <label>Referencia</label>
                                        <textarea name="referencia" class="form-control" rows="3" ng-model="view.referencia" placeholder="Referencia"></textarea>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary" ng-disabled="buttonDisableState()">Aceptar</button>
                            <button type="button" class="btn btn-default" ng-click="cancel()">Cancelar</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-sm-12">

                            <tabset>
                                <tab heading="Cuenta Bancaria Origen">
                                    <div class="panel panel-default">
                                        <table class="table">
                                            <tr>
                                                <td style="font-weight: bold;">Socio:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaOrigen.socio"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">Tipo y N&deg; Doc.:</td>
                                                <td><span ng-bind-template="{{objetosCargados.cuentaBancariaOrigen.tipoDocumento}}/{{objetosCargados.cuentaBancariaOrigen.numeroDocumento}}"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">Tipo Cuenta:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaOrigen.tipoCuenta"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">N&deg; Cuenta:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaOrigen.numeroCuenta"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">
                                                    <span class="visible-sm visible-lg">✔ Moneda:</span>
                                                </td>
                                                <td>
                                                    <span class="label label-info">Info</span>
                                                    <span ng-bind="objetosCargados.cuentaBancariaOrigen.moneda.denominacion"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">Estado Cuenta:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaOrigen.estadoCuenta"></span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </tab>
                                <tab heading="Cuenta Bancaria Destino">
                                    <div class="panel panel-default">
                                        <table class="table">
                                            <tr>
                                                <td style="font-weight: bold;">Socio:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaDestino.socio"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">Tipo y N&deg; Doc.:</td>
                                                <td><span ng-bind-template="{{objetosCargados.cuentaBancariaDestino.tipoDocumento}}/{{objetosCargados.cuentaBancariaDestino.numeroDocumento}}"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">Tipo Cuenta:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaDestino.tipoCuenta"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">N&deg; Cuenta:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaDestino.numeroCuenta"></span></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">
                                                    <span class="visible-sm visible-lg">✔ Moneda:</span>
                                                </td>
                                                <td>
                                                    <span class="label label-info">Info</span>
                                                    <span ng-bind="objetosCargados.cuentaBancariaDestino.moneda.denominacion"></span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;">Estado Cuenta:</td>
                                                <td><span ng-bind="objetosCargados.cuentaBancariaDestino.estadoCuenta"></span></td>
                                            </tr>
                                        </table>
                                    </div>
                                </tab>
                            </tabset>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <h3 class="panel-title" style="font-weight: bold;">Titulares</h3>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="text-right">
                                                <button type="button" ng-click="showFirmaTodos()" class="btn btn-link" style="padding: 0px 12px;">
                                                    Ver todos
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <table class="table table-condensed table-striped">
                                    <tr ng-repeat="titular in objetosCargados.titularesOrigen | filter:{ estado: true }">
                                        <td><span ng-bind-template="{{titular.personaNatural.tipoDocumento.abreviatura}}/{{titular.personaNatural.numeroDocumento}}"></span></td>
                                        <td><span ng-bind-template="{{titular.personaNatural.apellidoPaterno}}&nbsp;{{titular.personaNatural.apellidoMaterno}},{{titular.personaNatural.nombres}}"></span></td>
                                        <td>
                                            <button type="button" ng-click="showFirma($index)" class="btn btn-info btn-xs">
                                                <span class="glyphicon glyphicon-picture"></span> Firma
                                            </button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </form>
    </fieldset>
</div>
